import React, { useEffect, useState } from 'react'
import { Space, Table, Tag,Image, Button, Drawer, Form, Select  } from 'antd';
import type { TableProps } from 'antd';
import { getPlayListApi } from '../../services/axios';
import type { DetailList } from '../../services/axios';




const Home:React.FC = () => {
  const [data,setData] = useState<DetailList[]>([])
  const [open, setOpen] = useState(false);

  const columns: TableProps<DetailList>['columns'] = [
    {
      title: '歌单名称',
      dataIndex: 'name',
      key: 'name'
    },
    {
      title: '歌单封面',
      dataIndex: 'coverImgUrl',
      key: 'coverImgUrl',
      render:(_) => {
        return (
          <Image src={_} width={100} height={100} />
        )
      }
    },
    {
      title: '播放量',
      dataIndex: 'playCount',
      key: 'playCount'
    },
    {
      title: '最近更新时间',
      dataIndex: 'updateTime',
      key: 'updateTime'
    },
    {
      title: '创建人',
      dataIndex: 'creator',
      key: 'creator',
      render: (_,record) => {
        return (
          <>
          {record.creator.nickname}
          </>
        )
      }
    },
    {
      title: 'Tags',
      key: 'tags',
      dataIndex: 'tags',
      render: (_, record) => {
        return (
          <>
            {record.tags.map((tag) => {
              return (
                <Tag key={tag}>{tag}</Tag>
              )
            })}
          </>
        )
      }
    },
    {
      title: '操作',
      key: 'action',
      render:(_,record) => (
        <Space size='middle'>
          <Button type='primary' size='small' onClick={() => showDetail(record)}>查看详情</Button>
        </Space>
      )
    },
  ]

  const showDetail = (row:DetailList) => {
    setOpen(true)
    console.log(row)
  }
  const [total,setTotal] = useState(0)
  const [params,setParams] = useState({
    limit:5,
    offset:0
  })

  const getList = async () => {
    const res = await getPlayListApi(params)
    setData(res.data.playlists)
    setTotal(res.data.total)
    console.log(total)
  }

  useEffect(() => {
    getList()
  },[params])



  return (
    <div>
      <h1>home</h1>
      <Form autoComplete="off" layout="inline">
        <Form.Item
          label="标签"
          name="cat"
        >
          <Select style={{width:200}}/>
        </Form.Item>
        <Form.Item
          label="类型"
          name="order"
        >
          <Select 
          style={{width:200}}
          options={[
            {value:'new',label:'最新'},
            {value:'hot',label:'最热'}
          ]}
          />
        </Form.Item>
      </Form>


      <Table<DetailList> 
        columns={columns} 
        dataSource={data}
        rowKey={'id'}
        pagination={{
          current:params.offset / params.limit + 1,
          pageSize:params.limit,
          total,
          onChange:(page,pageSize) => {
            setParams ({
              limit:pageSize,
              offset:(page - 1) * pageSize
            })
          }
        }}
        />
      <Drawer title="Basic Drawer" onClose={() => setOpen(false)} open={open}>
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Drawer>
    </div>
  )
}



export default Home